<ul id='timeline'>
    {foreach name="list" item="vo"}

    <li class='work'>

        <div class="relative" style="padding-left: 20px;color: #cccccc;font-size: 1em;">
            <label for='work' >{$vo.checkpoint}</label>
            <span class='circle'></span>
        </div>
        <div class='contentnew'>
            <p >
                {$vo.is_abnormal}

            </p>
        </div>
    </li>
    {/foreach}

</ul>




<style>
    /* -------------------------------------
  * For horizontal version, set the
  * $vertical variable to false
  * ------------------------------------- */
    /* -------------------------------------
     * General Style
     * ------------------------------------- */
    @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
    /*body {*/
    /*    max-width: 1200px;*/
    /*    margin: 0 auto;*/
    /*    padding: 0 5%;*/
    /*    font-size: 100%;*/
    /*    font-family: "Noto Sans", sans-serif;*/
    /*    color: #eee9dc;*/
    /*    background: #48b379;*/
    /*}*/

    /*h2 {*/
    /*    margin: 3em 0 0 0;*/
    /*    font-size: 1.5em;*/
    /*    letter-spacing: 2px;*/
    /*    text-transform: uppercase;*/
    /*}*/

    /* -------------------------------------
     * timeline
     * ------------------------------------- */
    #timeline {
        list-style: none;
        margin: 50px 100px 30px 150px;
        padding-left: 30px;
        border-left: 8px solid #eee9dc;
    }
    #timeline li {
        margin: 40px 0;
        position: relative;
    }
    #timeline p {
        margin: 0 0 15px;
    }

    .date {
        margin-top: -10px;
        top: 50%;
        left: -158px;
        font-size: 0.95em;
        line-height: 20px;
        position: absolute;
    }

    .circle {
        margin-top: -10px;
        top: 50%;
        left: -42px;
        width: 15px;
        height: 15px;
        background: #48b379;
        border: 5px solid #eee9dc;
        border-radius: 50%;
        display: block;
        position: absolute;
    }

    .contentnew {
        /*max-height: 20px;*/
        padding: 50px 20px 0;
        border-color: transparent;
        border-width: 2px;
        border-style: solid;
        border-radius: 0.5em;
        position: relative;
        display: block;
        border: 2px solid #f9f9f9;
    }
    .contentnew:before, .contentnew:after {
        content: "";
        width: 0;
        height: 0;
        border: solid transparent;
        position: absolute;
        pointer-events: none;
        right: 100%;
    }
    /*.contentnew:before {*/
    /*    border-right-color: inherit;*/
    /*    border-width: 20px;*/
    /*    top: 50%;*/
    /*    margin-top: -20px;*/
    /*}*/
    /*.contentnew:after {*/
    /*    border-right-color: #b34868;*/
    /*    border-width: 17px;*/
    /*    top: 50%;*/
    /*    margin-top: -17px;*/
    /*}*/
    .contentnew p {
        /*max-height: 0;*/
        color: #cccccc;
        text-align: justify;
        word-break: break-word;
        hyphens: auto;
        overflow: hidden;
    }

    label {
        font-size: 1em;
        position: absolute;
        z-index: 100;
        cursor: pointer;
        top: 20px;
        transition: transform 0.2s linear;
    }

    .radio {
        display: none;
    }

    .radio:checked + .relative label {
        cursor: auto;
        transform: translateX(42px);
    }
    .radio:checked + .relative .circle {
        background: #e4cbc4;
    }
    .radio:checked ~ .contentnew {
        max-height: 180px;
        border-color: #eee9dc;
        margin-right: 20px;
        transform: translateX(20px);
        transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
    }
    .radio:checked ~ .contentnew p {
        max-height: 200px;
        color: #ccc;
        /*transition: color 0.3s linear 0.3s;*/
    }

    /* -------------------------------------
     * mobile phones (vertical version only)
     * ------------------------------------- */
    @media screen and (max-width: 767px) {
        #timeline {
            margin-left: 0;
            padding-left: 0;
            border-left: none;
        }
        #timeline li {
            margin: 50px 0;
        }

        label {
            width: 85%;
            font-size: 1.1em;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: block;
            transform: translateX(18px);
        }

        .contentnew {
            padding-top: 45px;
            border-color: #eee9dc;
        }
        .contentnew:before, .contentnew:after {
            border: solid transparent;
            bottom: 100%;
        }
        .contentnew:before {
            border-bottom-color: inherit;
            border-width: 17px;
            top: -16px;
            left: 50px;
            margin-left: -17px;
        }
        .contentnew:after {
            border-bottom-color: #48b379;
            border-width: 20px;
            top: -20px;
            left: 50px;
            margin-left: -20px;
        }
        .contentnew p {
            font-size: 0.9em;
            line-height: 1.4;
        }

        .circle, .date {
            display: none;
        }
    }

</style>